<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        *{margin:0;padding:0;background: #daffde;}
        body{width:100%; height: 100%;}
        input{
            border: 1px solid #979797;
            border-radius: 5px;
            width: 160px;
        }
        a{text-underline : none;}
        a:link {text-decoration: none;}
        a:visited {text-decoration: none;}
        a:hover {text-decoration: none;}
        a:active {text-decoration: none;}
        #main{position:relative;}
        #anchors { position:fixed;right:0; height: 100%; overflow: scroll;}
        #anchors ul li{  font-weight: bold; font-size: 16px;  }
        ul{list-style:none}
        ul li{line-height:23px}
        h1{margin:10px 0 5px;font-size:18px}
        p{padding:2px 0}
        .submit{padding:0 10px;height:25px;}
        form{margin-bottom:9pt}
        form input[type=text]{padding:3px}
        .remark table{margin-bottom:50px}
        .remark table th{text-align:left}
        .remark table td{padding:0 30px 0 0}
        .demo_data{margin:0 0 15px}
        .demo_data p{width: 70%;}
        .hide,.iframe{display:none}
        .item{margin-left:10px}
        #anchors .op_item .op{display: block; margin: 8px 0 5px 0;}
        #anchors .op_item ul{display: none;margin: 0 0 0 35px;}
        #anchors .op_item:nth-child(1) ul{display: block;}
        .required{
            color: #ff000e;font-size: 14px; margin: 0 3px 0 0; font-style: normal;margin: 0 0 0 4px;
        }
        .mark{
            color: #ff342f;
        }
    </style>
    <!--jq库文件-->
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <!--/jq库文件-->
<body>

<div id="explain" style="margin: 10px 0 0 10px;">
    <h1>使用说明</h1>
    <ul>
        <li><b>表单参数使用：</b>（class=param：表示该控件为参数 name：参数名 required：字段必须）</li>
        <li><b>数据类型说明：无示例说明的参数为常规</b></li>
    </ul>

</div>

<div id="main">
    <div class="item">
        <h1><a class="anchors" data-parent="演示">使用示例</a></h1>
        <form action="{:U('Api/Public/example')}" enctype="multipart/form-data" method="post">
            <p class="mark">参数必须</p>
            <p>姓名<input class="param" type='text' name='username' value="" required="required" data-type="int"/></p>
            <p>昵称<input class="param" type='text' name='password' value="" /></p>

            <p class="mark">特殊类型说明</p>
            <p>已学技能<input class="param" type='text' name='skill' value="" placeholder="例如：1,4,5,9"/></p>

            <p class="mark">数组参数传递</p>
            <p>图片1<input class="param" type='text' name='pic[]' value=""/></p>
            <p>图片2<input class="param" type='text' name='pic[]' value=""/></p>

            <p class="mark">复杂数组参数传递</p>
            <p>学生1编号<input class="param" type='text' name='student[0][pk_id]' value=""/></p>
            <p>学生1姓名<input class="param" type='text' name='student[0][name]' value=""/></p>
            <p>学生2编号<input class="param" type='text' name='student[1][pk_id]' value=""/></p>
            <p>学生2姓名<input class="param" type='text' name='student[1][name]' value=""/></p>

            <p class="mark">不同选项不同参数</p>
            <p>用户类型
                <select name="type" class="param" required="required" onchange="show_relation_param(this);">
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </p>
            <!--子项个性参数-->
            <div class="select_change_box">
                <!--普通消息-->
                <p>男性专属<input data-relation="1" type="text" class="param" value="" name="nan"></p>
                <p class="hide">女性专属<input data-relation="2" type="text" class="param" value="" name="nv" disabled="disabled"></p>
            </div>
            <p><button type="button" class="submit" >确定</button></p>
        </form>
    </div>

    <div class="item">
        <h1><a class="anchors" data-parent="代理商操作">车牌号查询</a></h1>
        <form action="{:U('Weixin/Index/SelectQuery')}" enctype="multipart/form-data" method="post">
            <p>车牌号<input class="param" type='text' name='query_car_no' value=""/></p>
            <p>时间<input class="param" type='text' name='query_datetime' value=""/></p>
            <p><button type="button" class="submit" >确定</button></p>
        </form>
    </div>

    <div class="item">
        <h1><a class="anchors" data-parent="代理商操作" data-table="order,user" data-field="order.pk_id,order.query_car_no,order.query_datetime,order.stage,order.create_time,user.name">获取车牌号列表</a></h1>
        <form action="{:U('Weixin/Index/GetCarNoList')}" enctype="multipart/form-data" method="post">
            <p>分页<input class="param" type='text' name='page' value="1"/></p>
            <p><button type="button" class="submit" >确定</button></p>
        </form>
    </div>

    <div class="item">
        <h1><a class="anchors" data-parent="代理商操作" data-table="order,user" data-field="order.pk_id,order.query_car_no,order.query_datetime,order.create_time,user.name" data-add-field="array@pic_list@图片列表">车牌号详情</a></h1>
        <form action="{:U('Weixin/Index/CarNoInfo')}" enctype="multipart/form-data" method="post">
            <p>PK_ID<input class="param" type='text' name='pk_id' value=""/></p>
            <p><button type="button" class="submit" >确定</button></p>
        </form>
    </div>

    <div class="item">
        <h1><a class="anchors" data-parent="管理员操作" data-table="order,user" data-field="order.pk_id,order.query_car_no,order.query_datetime,order.stage,order.create_time,user.name">获取车牌号列表</a></h1>
        <form action="{:U('Weixin/Admin/GetCarNoList')}" enctype="multipart/form-data" method="post">
            <p>分页<input class="param" type='text' name='page' value="1"/></p>
            <p><button type="button" class="submit" >确定</button></p>
        </form>
    </div>

    <div class="item">
        <h1><a class="anchors" data-parent="管理员操作" data-table="order,user" data-field="order.pk_id,order.query_car_no,order.query_datetime,order.create_time,user.name">车牌号详情</a></h1>
        <form action="{:U('Weixin/Admin/CarNoInfo')}" enctype="multipart/form-data" method="post">
            <p>PK_ID<input class="param" type='text' name='pk_id' value=""/></p>
            <p><button type="button" class="submit" >确定</button></p>
        </form>
    </div>

    <div class="item">
        <h1><a class="anchors" data-parent="管理员操作">车牌号更新图片</a></h1>
        <form action="{:U('Weixin/Admin/UpdateCarNoInfo')}" enctype="multipart/form-data" method="post">
            <p>PK_ID<input class="param" type='text' name='pk_id' value=""/></p>
            <p>上传文件集合<input class="param" type='file' name='file[]' value=""/></p>
            <p><button type="button" class="submit" >确定</button></p>
        </form>
    </div>
</div>
</body>
<script>
    function show_relation_param(obj){
        var p_arr = $(obj).parents('.item').find('.select_change_box p').addClass('hide');
        var relation_id = $(obj).val();
        if(p_arr.length > 0){
            $.each(p_arr,function(key,val){
                var data_relation = $(val).find('.param').attr('data-relation'),relation_arr = new Array();
                relation_arr = data_relation.split(",");
                if(relation_arr.indexOf(relation_id) != -1){
                    $(val).find('.param').attr('disabled',false).parents('p').removeClass('hide');
                }
            });
        }
    }

    $(function(){
        //自动加序号
        var titleArr = $('#main').find('h1');
        for(var i=0;i<titleArr.length;i++){
//            titleArr.eq(i).find('span').text(i+1+'、');
            titleArr.eq(i).find('.anchors').prepend(i+1+'、');
        }

        //自动显示字段名
        var formArr = $('#main').find('form');
        for(var i=0;i<formArr.length;i++){
            var fieldArr = formArr.eq(i).find('p');

            //自动显示接口地址
            var action = formArr.eq(i).attr("action");
            var arr = action.split("{:C('APP_URL')}");
            var short_action = arr[1].split(".html");
            $('#main').find('h1').eq(i).after('<p>请求地址（'+formArr.eq(i).attr("method")+'）：'+ short_action[0]+ '</p>');

            //自动设置每个form表单的target属性
            var action_arr = short_action[0].split('/');
            formArr.eq(i).attr("target",action_arr[3]);

            //自动显示参数名
            for(var j=0;j<fieldArr.length;j++){
                var fieldName = fieldArr.eq(j).find('.param').attr('name'); //字段名
                var required = fieldArr.eq(j).find('.param').attr('required'); //是否必填
                var data_type = fieldArr.eq(j).find('.param').attr('data-type'); //数据类型
                if(data_type == undefined){
                    data_type = '';
                }else{
                    data_type = '[ '+data_type+' ]'
                }
                fieldArr.eq(j).find('.param').before('（'+fieldName+'）'+data_type+'：');
                if(fieldArr.eq(j).find('.param').attr('required') == 'required'){
                    fieldArr.eq(j).append('<b class="required">*</b>');
                }
            }
        }

        //自动生成锚点
        var opItemArr = $('#main').prepend('<div id="anchors"></div>').find('#anchors');
        var itemArr = $('#main').find('.item');
        for(var i=0;i<itemArr.length;i++){
            var anchors_parent = itemArr.eq(i).find('a').attr('data-parent');
            var anchors_text = itemArr.eq(i).find('a').text();
            if(opItemArr.find("div#"+anchors_parent).length == 0){
                opItemArr.append(
                        '<div class="op_item" id="'+anchors_parent+'">'+
                        '<a class="op" href="javascript:;">'+anchors_parent+'</a>'+
                        '<ul>'+
                        '<li><a href="#'+anchors_text+'">'+anchors_text+'</a></li>'+
                        '</ul>'+
                        '</div>'
                );
            }else{
                opItemArr.find("div#"+anchors_parent).find('ul').append(
                        '<li><a href="#'+anchors_text+'">'+anchors_text+'</a></li>'
                );
            }
            itemArr.eq(i).find('a').attr('name',anchors_text);
        }
        $('#anchors .op').click(function () {
            $(this).parents('.op_item').find('ul').toggle();
        });

        //监听提交事件
        $('.submit').click(function () {
            var item = $(this).parents('.item');
            $.ajax({
                url: item.find('form').attr('action'),
                type: item.find('form').attr('method'),
                data: new FormData(item.find('form')[0]),
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                success: function(data,status,xhr){
                    if(data != undefined){
                        if(item.find('.remark').length == 0){
                            item.append('<div class="remark hide"><table><tbody><tr><th>类型</th><th>参数名</th><th>说明</th></tr></tbody></table></div>');
                        }

                        //显示参数说明,将返回值显示出来
                        var remark = item.find('.remark').removeClass('hide');
                        if(remark.find('.demo_data').length == 0){
                            remark.prepend(
                                    '<div class="demo_data">'+
                                    '<p>返回： <span>'+JSON.stringify(data)+'</span></p>'+
                                    '</div>'
                            );
                        }else{
                            remark.find('.demo_data span').text(JSON.stringify(data));
                        }
                        //返回数据列表
                        if(item.find('.remark tbody tr').length == 1){
                            var table_name = item.find('.anchors').attr('data-table');
                            var field_name = item.find('.anchors').attr('data-field');
                            var add_field_name=item.find('.anchors').attr('data-add-field');
                            if(table_name){
                                $.post("{:U('Home/Public/get_field_comment')}",{table:table_name,field:field_name,add_field:add_field_name},function(data){
                                    if(data.error == 0){
                                        var box = item.find('.remark tbody');
                                        $.each(data.rows,function(key,value){
                                            box.append('<tr><td>'+value['type']+'</td><td>'+value['field']+'</td><td>'+value['comment']+'</td></tr>');
                                        })
                                    }
                                },'json')
                            }
                        }
                    }
                }
            });
        });
    })
</script>
</head>
</html>